<template>
	<view :class="['c-button-wrap', customClass]" :style="[wrapStyle]">
		<button :class="['c-button']" :style="[style]" @click="click">
			<slot></slot>
		</button>
	</view>
</template>

<script>
	export default {
    name: 'c-button',
    props: {
      width: {
        type: [Number, String],
        default: 136
      },
      height: {
        type: [Number, String],
        default: 46
      },
      block: { // 块状
        type: Boolean,
        default: false
      },
      disabled: { // 禁用
        type: Boolean,
        default: false
      },
      color: { // 字体颜色
        type: String,
        default: '#FFF'
      },
      bgColor: { // 背景颜色
        type: String,
        default: '#000'
      },
      borderColor: { // 边框颜色
        type: String,
        default: ''
      },
      fontSize: { // 字体大小
        type: [String, Number],
        default: 24
      },
      round: { // 圆角/角度
        type: [Boolean, String, Number],
        default: true
      },
      customClass: {
        type: String,
        default: ''
      },
      customStyle: {
        type: String,
        default: ''
      },
    },
    data() {
      return {}
    },
    computed: {
      style() {
        let width = this.width + 'rpx'
        if (this.block) {
          width = '100%'
        }
        let radius = 'none'
        if (typeof this.round == 'boolean') {
          radius = this.height + 'rpx'
        } else {
          radius = this.round + 'rpx'
        }

        let style = {
          'height': this.height + 'rpx',
          'line-height': this.height + 'rpx',
          'text-align': 'center',
          'width': width,
          'color': this.color,
          'background': this.bgColor,
          'border-radius': radius,
          'font-size': this.fontSize + 'rpx',
          'border': this.borderColor ? ('1rpx solid ' + this.borderColor) : 'none',
          'opacity': this.disabled ? '.5' : 1,
        }
        return style
      },
      wrapStyle() {
        let width = this.width + 'rpx'
        if (this.block) {
          width = '100%'
        }
        let style = {width}
        if (!this.customStyle) {
          return style
        }
        let cstyle = this.customStyle.split(';')
        cstyle.forEach(item => {
          if (item) {
            let s = item.split(':')
            style[s[0]] = s[1]
          }
        })
        return style
      }
    },
    methods: {
      click(e) {
        if (props.disabled) return
        e && typeof(e.stopPropagation) === 'function' && e.stopPropagation()
        this.$emit("click");
      }
    },
    options: {
      virtualHost: true // 组件是否使用虚拟节点，默认false
    }
  }
</script>
